/*
 * Ext JS Library 2.2.1
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
function clicked(pos){
	Ext.MessageBox.alert(pos+" clicked");
}
Ext.onReady(function(){
    	var mapwin;
		var win;
    	var controls;
    	var item1 = Ext.get('item1');
    	
    	var map = new Ext.ux.NMapPanel();
    	var dragable = true;
    	
        var button = Ext.get('show-btn');
        // create the window on the first click and reuse on subsequent clicks
        if(!win){
            win = new Ext.Window({
                applyTo     : 'hello-win',
                layout      : 'fit',
                width       : 200,
                height      : 370,
                collapsible	: true,
                closable	: false,
                plain       : true,
                draggable	: false,
                resizable 	: false,
                minimize	: false,
                maximize	: false,
                x			: 640,
                y			: 30,
                items       : new Ext.TabPanel({
                    applyTo        : 'hello-tabs',
                    autoTabs       : true,
                    activeTab      : 0,
                    deferredRender : false,
                    border         : false
                }),
//                buttons: [{
//                	text : 'add',
//                	minWidth : 40,
//                	handler : function() {
//                	}
//                },{
//                	text : 'remove',
//                	minWidth : 40,
//                	handler : function() {
//            		}
//                }]
                buttons: [{
                    text     : 'zoom in',
                    minWidth : 55,
                    handler  : function(){
                		map.nmap.zoomIn();
	                } 
                },{
                    text     : 'zoom out',
                    minWidth : 55,
                    handler  : function(){
                		map.nmap.zoomOut();
                	}
                },{
                    text     : 'dragable',
                    minWidth : 55,
                    handler  :function(){
                		if(dragable == true) {
                			map.nmap.disableDrag();
                			dragable = false;
                			this.setText('drag X');
                		}
                		else {
                			map.nmap.enableDrag();
                			dragable = true;
                			this.setText('drag O');
                		}
                    }
                }]
            });
        }
        
    	// drop zones
        var dropzone = new Ext.dd.DropZone('mapdiv', {ddGroup:'group'});
    	
        item1.dd = new Ext.dd.DDProxy('item1', 'group', {       
             scope:this,
             fn:function(dd, data) {         
        		   Ext.MessageBox.alert('Alert', dd.getX() + ", " + dd.getY());
        		   // to do
        		   // ...
        		   // ..
             }
        });    
               
    	if(!controls) {
    		controls = new Ext.Window({
    			renderTo 	: 'controls',    			
    			width       : 200,
    	        height      : 100,
    	        x			: 640,
    	        y			: 420,
    			collapsible : false,
    			closable	: false,
    			draggable 	: true,
    			items		: item1			
    		});
    	}
                        
        if(!mapwin){
            mapwin = new Ext.Panel({
            	renderTo    : 'mapdiv',
                title		: 'naver map',
                width       : 600,
                height      : 500,
                x			: 30,
                y			: 30,
                collapsible	: true,
                draggable	: true,
                items : map
            });
        }
        
        win.show();
        controls.show();
        mapwin.show();
    });


